x`
<template>
  <h1>挂号信息</h1>
  <el-row :gutter="10">

    <el-col :span="6">
      <el-input v-model="query.RegistrationData.doctorName" placeholder="请输入医生姓名" style="width: 200px;" />
    </el-col>

    <!--    <el-col :span="6">-->
    <!--      <el-select v-model="query.RegistrationData.departmentId"-->
    <!--                 :clearable="true"-->
    <!--                 placeholder="请选择部门">-->
    <!--        <el-option v-for="item in departments.data"-->
    <!--                   :key="item.departmentId"-->
    <!--                   :label="item.departmentName"-->
    <!--                   :value="item.departmentId" />-->
    <!--      </el-select>-->
    <!--    </el-col>-->

    <el-col :span="6">
      <el-select v-model="query.RegistrationData.isDeal"
                 :clearable="true"
                 placeholder="是否被处理"
                 style="width:150px;">
        <el-option label="是" value="1" />
        <el-option label="否" value="0" />
      </el-select>
    </el-col>

    <el-col :span="6">
      <el-date-picker
        v-model="query.RegistrationData.useTime"
        type="date"
        placeholder="请选择日期"
        style="width:150px;"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-col>


    <el-col :span="6">
      <el-button type="primary" @click="getRegistrationDataData(query.RegistrationData)">搜索</el-button>
    </el-col>

  </el-row>
  <el-table :data="tableData.data" style="width: 100%;margin-top: 20px">

    <el-table-column label="序号" type="index" width="80" align="center">
    </el-table-column>

    <el-table-column label="患者姓名" prop="patientName" width="100" align="center">
    </el-table-column>

    <el-table-column label="科室" prop="departmentName" width="100" align="center">
    </el-table-column>

    <el-table-column label="就诊医生" prop="doctorName" width="100" align="center">
    </el-table-column>

    <el-table-column label="患者身份证" prop="identity" width="200" align="center">
    </el-table-column>

    <el-table-column label="时间" prop="time" width="100" align="center">
    </el-table-column>


    <el-table-column label="性别" prop="gender" width="80" align="center">
    </el-table-column>

    <el-table-column label="被处理" prop="isDeal" width="80" align="center">
    </el-table-column>


    <el-table-column label="使用日期" width="130px" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.useTime }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="250px" align="center">
      <template #default="scope">
        <el-button
          style="width: 60px;"
          size="small"
          @click="handleEdit(scope.row)"
        >开药
        </el-button>
        <el-button
          style="width: 60px;"
          size="small"
          @click="handleinH(scope.row)"
        >住院
        </el-button>
        <!--        <el-button-->
        <!--          style="width: 60px;"-->
        <!--          size="small"-->
        <!--          type="danger"-->
        <!--          v-model:current-page="query.RegistrationData.pages"-->
        <!--          v-model:age-sizes="query.RegistrationData.size"-->
        <!--          @click="handleDelete(scope.row)"-->
        <!--        >退号-->
        <!--        </el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <div>
    <el-pagination
      small
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      class="pagiantion "
      @current-change="pageChange"
      v-model:current-page="query.RegistrationData.pages"
      v-model:page-size="query.RegistrationData.size"
    />
  </div>

  <!--  住院弹窗-->
  <el-dialog v-model="outerVisible" title="选择病房，病床">
    <h3>信息</h3>
    <el-form-item label="房间号" prop="roomId">
      <el-select v-model="queryAdd.inHospitalData.roomId"
                 placeholder="请选择房间号"
                 :clearable="true"
                 @change="roomIdChange">
        <el-option v-for="item in roomIds.data"
                   :key="item.roomId"
                   :label="item.roomNumber"
                   :value="item.roomId" />
      </el-select>
    </el-form-item>

    <el-form-item label="病床号" prop="bedNum">
      <el-select v-model="queryAdd.inHospitalData.bedId" placeholder="请选择房间号" :clearable="true">
        <el-option v-for="item in bedNums.data"
                   :key="item.bedId"
                   :label="item.bedNum"
                   :value="item.bedId" />
      </el-select>
    </el-form-item>
    <el-button type="primary" @click="innn">确定</el-button>
  </el-dialog>

  <!--  开药弹窗-->
  <el-dialog v-model="outerVisible2" title="开药">
    <el-row :gutter="20">
      <!--      选择药品的表格-->
      <el-col :span="12">
        <div style="border-right: 1px solid black">
          <el-table
            ref="multipleTableRef"
            :data="MedicineTableData.data"
            style="width: 100%;height:400px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column fixed type="selection" width="55" />
            <el-table-column  property="medicineName" label="Name" width="120" />
            <el-table-column property="count" label="数量">
              <template #default="scope">
                <span v-show="scope.$index !== editIndex">{{ scope.row.count }}</span>
                <el-input
                  v-show="scope.$index === editIndex"
                  v-model="scope.row.count"
                  style="width: 90px;"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button link @click="countEdit(row)">编辑数量</el-button>
                <el-button type="primary" link @click="countSave">保存</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="medic">确定</el-button>
        </div>
      </el-col>

      <!--      被选择的表格-->
      <el-col :span="12">
        <div class="grid-content ep-bg-purple" />
        <h3>选择的药品</h3>
        <el-table
          ref="multipleTableRef2"
          :data="medicineListUse.description.list"
          style="width: 100%;height:400px"
        >
          <el-table-column property="medicineName" label="药品名称" width="120" />
          <el-table-column property="count" label="数量"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<script lang="js" setup>
import { Timer } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { deleteRegistration, getRegistration } from "@/utils/RegistrationRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import store from "@/store";
import dayjs from "dayjs";
import { getRoomIdAndNumberApi } from "@/utils/RoomRequest";
import { getBedNumAndIdApi } from "@/utils/BedRequest";
import { addInHospitalApi } from "@/utils/InHospitalRequest";
import { getMedicine, getMedicineType, putMedicine } from "@/utils/MedicineRequest";
//弹窗
const outerVisible = ref(false);
const outerVisible2 = ref(false);
const router = useRouter();
//展示数据
const tableData = reactive({
  data: [],
  total: 0,
  current: 1, //当前页数
  size: 10  //每页显示几条数据
});
const departments = reactive({
  data: []
});
//请求参数
const query = reactive({
  RegistrationData: {
    "doctorId": store.state.user.userInfo.employeeId,
    "useTime": dayjs().format("YYYY-MM-DD"),
    "patientName": "",
    "isDeal": "0",
    "pages": tableData.current,
    "size": tableData.size
  }
});

//组件加载时触发
onMounted(() => {
  getRegistrationDataData(query.RegistrationData);
});

//获取数据
const getRegistrationDataData = async (requestData) => {
  let res = await getRegistration(requestData);
  tableData.data = res.data;
  tableData.total = res.total;
  tableData.current = res.current;
};

// 住院参数
const queryAdd = reactive({
  inHospitalData: {
    "registrationId": "",
    "bedId": "",
    "doctorId": "",
    "patientId": "",
    "roomId": ""
  }
});

//住院
const handleinH = (row) => {
  if (row.isDeal === "是") {
    ElMessage({
      type: "warning",
      message: "该挂号记录已被处理"
    });
  } else {
    outerVisible.value = true;
    queryAdd.inHospitalData.doctorId = store.state.user.userInfo.employeeId;
    queryAdd.inHospitalData.patientId = row.patientId;
    queryAdd.inHospitalData.registrationId = row.registrationId;
    getRooIdAndRoomNumber(3);
  }

};

//病房的id和房间号
const roomIds = reactive({
  data: []
});

const bedNums = reactive({
  data: []
});
//获取病房间的id和房间号
const getRooIdAndRoomNumber = async (id) => {
  //发送请求
  let res = await getRoomIdAndNumberApi(id);
  // 为roomIds.data 赋值
  roomIds.data = res.data;
};

//选择未使用的病床
const roomIdChange = async (id) => {
  const res = await getBedNumAndIdApi(id);
  bedNums.data = res.data;
};


//发送住院请求
const innn = async () => {
  const res = await addInHospitalApi(queryAdd.inHospitalData);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
  }
  getRegistrationDataData(query.RegistrationData);
  outerVisible.value = false;
};


//开药

const editIndex = ref(-1);
//药品数据
const MedicineTableData = reactive({
  data: [],
  total: 0
});

//选择器
const medicineTypes = reactive({
  data: []
});

//被选择的药品和请求参数
const medicineListUse = reactive({
  registrationId:"",
  doctorId: "",
  patientId: "",
  description: {
    ifInHospital: "否",
    list: [],
    msg: "",
  },
});

//获取药品的请求参数
const query2 = reactive({
  MedicineData: {
    "medicineName": "",
    "medicineType": "",
    "size": 100000,
    "pages": 1
  }
});

//获取药品类别
const getMedicineTypeOptionData = async () => {
  let res = await getMedicineType();
  medicineTypes.data = res.data;
};

//获取数据
const getMedicineData = async (requestData) => {
  let res = await getMedicine(requestData);
  MedicineTableData.data = res.data;
  MedicineTableData.data.forEach(i => {
    i.count = 1;
  });
  MedicineTableData.total = res.total;
  MedicineTableData.current = res.current;
};

//开药弹窗函数
const handleEdit = (row) => {
  if (row.isDeal === "是") {
    ElMessage({
      type: "warning",
      message: "该挂号记录已被处理"
    });
  } else {
    medicineListUse.registrationId = row.registrationId;
    medicineListUse.doctorId = row.doctorId;
    medicineListUse.patientId = row.patientId;
    getMedicineTypeOptionData();
    getMedicineData(query2.MedicineData);
    //发送请求获取药品数据
    outerVisible2.value = true;
  }

  /*router.push({
    path:'/home/updatemps',
    query:{id:row.registrationId}
  })*/
};

//选择药品函数
const handleSelectionChange = (val) => {
  medicineListUse.description.list = val;
};

//点击使单元格可编辑
const countEdit = (row) => {
  editIndex.value = MedicineTableData.data.indexOf(row);
};

//保存编辑结果
const countSave = () => {
  editIndex.value = -1;
};

//确定药品函数
const medic = async () => {
  let res = await putMedicine(medicineListUse);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "配药成功"
    });
  } else {
    ElMessage({
      type: "warning",
      message: "配药失败"
    });
  }
  outerVisible2.value = false;
  getRegistrationDataData(query.RegistrationData);
};

//分页的页码变化时触发
const pageChange = () => {
  // console.log(query.employeeData.pages);
  getRegistrationDataData(query.RegistrationData);
};


//删除
// const handleDelete = (row) => {
//   ElMessageBox.confirm(
//     "确定要删除吗?",
//     "警告",
//     {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning"
//     }
//   )
//     .then(async () => {
//       let res = await deleteRegistration(row.registrationId);
//       if (res.data) {
//         ElMessage({
//           type: "success",
//           message: "删除成功"
//         });
//       } else {
//         ElMessage({
//           type: "error",
//           message: "删除成功"
//         });
//       }
//       getRegistrationDataData(query.RegistrationData);
//
//     })
//     .catch(() => {
//       ElMessage({
//         type: "info",
//         message: "取消删除"
//       });
//     });
// };

</script>

<style scoped>
</style>